<script setup>
import { ref } from 'vue';
import draggableGroup from './components/draggableGroup.vue'
const leftData = ref([
  {
    key: "textx",
    label: "文字",
  },
  {
    key: "buttonx",
    label: "按钮",
  },
  {
    key: "imagex",
    label: "图片"
  },
  {
    key: "flexx",
    label: "flexx",
    children:[],
    put: true
  }
]);
const leftDrag = ref(false);
const rightDrag = ref(false);
const rightDayta = ref({
  pageid: "111",
  children: []
});
</script>

<template>
  <div style="height:100px"></div>
  <div class="wrap">
    <div class="cel">
      <draggableGroup :drag="leftDrag" :children="leftData" :sort="false" itemKey="key" v-model="leftData"
        :group="{ name: 'people', pull: 'clone', put: false }">
        <template #item="{ element, index }">
          <div>
            <div>
              <!-- {{ index }} - {{ element.label }} -->
              <component :is="element.key" />
            </div>
          </div>
        </template>
      </draggableGroup>
    </div>
    <div class="cel">
      <!-- <ul>
        <li v-for="item in rightDayta.children">
         <component :is="item.key"/>
        </li>
      </ul> -->
      <draggableGroup :drag="rightDrag" :children="rightDayta.children" itemKey="id" v-model="rightDayta.children"
        :group="{ name: 'people2', pull: 'clone', put: true }">
        <template #item="{ element, index }">
          <div>
            <div>
              <!-- {{ index }} - {{ element.label }} -->
              <component :is="element.key">
                <draggableGroup :drag="rightDrag" :children="element.children" itemKey="id"
                  v-model="element.children" :group="{ name: 'id'+element.id, pull: 'clone', put: true }">
                  <template #item="{ element, index }">
                    <div>
                      <div>
                        <!-- {{ index }} - {{ element.label }} -->
                        <component :is="element.key">
                          2232323
                        </component>
                      </div>
                    </div>
                  </template>
                </draggableGroup>
              </component>
            </div>
          </div>
        </template>
      </draggableGroup>
    </div>
  </div>
</template>

<style >
.sortable-ghost {
  background-color: blue;
  opacity: .5;
}

.wrap {
  height: 100vh;
  display: flex;
}

.cel {
  width: 300px;
  padding: 10px;
  border: 1px solid grey;
  box-sizing: border-box;

}

ul,
li {
  padding: 0;
  list-style: none;
  margin: 0;
}

li {
  padding: 10px;
  background: rgba(0, 0, 0, .2);
}

li:hover {
  background: rgba(0, 0, 0, .4);
}

.cel+.cel {
  margin-left: 10px;
}

.dragArea {
  /* width: 100%;
  height: 100%; */
  min-width: 100%;
  min-height: 100%;
  outline: gray dashed 1px;
}
</style>
